<template>
	<view class="examplesOf">
		<view class="cadr_box">
			<view class="cadr_info">
				<image class="tou" :src="detailsData.shopIcon" mode=""></image>
				<view class="detail">
					<view class="name">{{detailsData.name}}</view>
					<view class="code">
						<view class="">编号</view>
						<view class="">{{detailsData.cardNo}}</view>
					</view>
				</view>
			</view>
			<view class="card_content">
				<image class="card_fen" :src="detailsData.cover" mode="scaleToFill"></image>
				<view class="num">持卡{{detailsData.holdDay}}天</view>
				<view class="card_name">{{detailsData.cardName}}</view>
			</view>
		</view>
		<view class="input_box">
			<view class="bt">转赠好友</view>
			<input class="phoneBox" type="number" v-model="phone" placeholder="请输入好友的手机号" placeholder-class="hui"
				@input="changePhone" />
			<view class="btn" @click="handleQuery">查询好友信息</view>
		</view>
		<view class="resultsBox">
			<view class="noName" v-if="walletData.flag == 1">用户不存在</view>
			<view class="noName" v-if="walletData.flag == 2">您的好友未进行实名认证，快去提醒他吧。</view>
			<view class="res" v-if="walletData.flag == 3">
				<view class="txt">好友姓名：{{walletData.name}}</view>
				<view class="txt">钱包地址：{{walletData.accountAddress}}</view>
				<view class="txt1">
					<text>您确定向{{walletData.accountAddress}}地址转赠1张</text>
					<text style="color:#1557F2;">编号{{detailsData.cardNo}}{{detailsData.cardName}}</text>
				</view>
			</view>
		</view>
		<view class="botBox">
			<view class="tips">
				<text>温馨提示：</text>
				<text>一旦发起NFR转赠，转赠后不可撤销，将不再显示数字藏品</text>
			</view>
			<view class="btn">
				<view class="tou" v-if="walletData.flag != 3 && !isShow"></view>
				<text @click="handleSubmit">确认转赠</text>
			</view>
		</view>
		<DetailDialog ref="pupop" title="请支付转赠费用" @confirm="handleConfirm">
			<view class="" slot="one" v-if="tradePasswordType == 2">
				<view class="titlePop">请支付转赠费用</view>
				<view class="moneyBox">
					<view class="money" v-if="configData.feeType == 2">
						<text>现金：</text>
						<text>￥{{configData.fee}}</text>
					</view>
					<view class="integral" v-if="configData.feeType == 1">
						<view class="intLable">
							<image src="@/static/my/shenye_icon.png" mode=""></image>
							<text>神椰CoCo：</text>
							<text class="num">{{configData.fee}}</text>
						</view>
						<text class="currMoney">当前余额：{{coinNum}}</text>
					</view>
					<view class="integral" v-if="configData.feeType == 3">
						<view class="intLable">
							<image src="@/static/my/shenye_icon1.png" mode=""></image>
							<text>通分：</text>
							<text class="num">{{configData.fee}}</text>
						</view>
						<text class="currMoney">当前余额：{{coinNum}}</text>
					</view>
				</view>
				<view class="btnBox">
					<view class="btn" v-if="configData.feeType != 2" @click="sumitPay">确认支付</view>
					<view class="btn" v-if="configData.feeType == 2" @click="handlePay(2)">微信支付</view>
				</view>
			</view>
			<view class="" slot="two" v-if="tradePasswordType == 1">
				<view class="coding_box">
					<view class="title"></view>
					<view class="coding_box_item coding_box_item_no">
						您还未设置积分交易密码请先前往设置
					</view>
					<view class="but_no" @click="setPassword">
						设置交易密码
					</view>
				</view>
			</view>
		</DetailDialog>

		<view class="dialogo" v-if="setPasswordStatus" @touchmove.prevent @click="closePassword">
			<view class="password_box" @click.stop="">
				<view class="password_title">输入6位交易密码</view>
				<view class="password_num">
					<view class="password_zi" v-for="(item, index) in 6">
						<view :class="{'passwordOn':password[index]}"></view>
					</view>
				</view>
				<view class="digital_keyboard">
					<view class="keyboard_kuagn" v-for="(el,elindex) in numberBox">
						<view class="otherbg" v-if="el.id == 10"></view>
						<view class="delete" v-else-if="el.id == 12" @tap="deleteNum(el)"></view>
						<view v-else class="keyboard_num" @tap="clickNum(el)">{{el.num}} </view>
					</view>
				</view>
				<view style="width: 100%;height: 50rpx; "></view>
			</view>
		</view>
	</view>
</template>

<script>
	import DetailDialog from '@/pages/my/equity-card/components/DetailDialog2.vue'
	import wechat from '@/components/jweixin-module/wechat'
	import {
		rsaEncrypt,
	} from '@/common/RSA.js'
	export default {
		components: {
			DetailDialog,
		},
		data() {
			return {
				phone: '',
				loading: true,
				isSubmit: true,
				isShow: false,
				payLoading: true,
				isRealName: false, //是否实名认证
				detailsData: {},
				walletData: {}, //钱包信息
				configData: {},
				payStatus: true,
				orderId: '',
				coinNum: 0,
				tradePasswordType: null, //交易密码是否设置 1 未设置 2设置
				password: '', //交易密码
				setPasswordStatus: false, //判定是否设置交易密码
				numberBox: [{
						id: 1,
						num: '1'
					},
					{
						id: 2,
						num: '2'
					},
					{
						id: 3,
						num: '3'
					},
					{
						id: 4,
						num: '4'
					},
					{
						id: 5,
						num: '5'
					},
					{
						id: 6,
						num: '6'
					},
					{
						id: 7,
						num: '7'
					},
					{
						id: 8,
						num: '8'
					},
					{
						id: 9,
						num: '9'
					},
					{
						id: 10,
						num: ''
					},
					{
						id: 11,
						num: '0'
					},
					{
						id: 12,
						num: ''
					},
				],
				password: '',
			}
		},
		onShow() {
			console.log('执行getCustomer')
			this.getCustomer()
		},
		onLoad(e) {
			this.id = e.id
			this.getCustomerCardDetail(this.id)
			this.getRealNameInfo()
			// this.getCustomer()
		},
		methods: {
			async getCustomer() { //查询是否设置交易密码
				var res = await this.$api.getCustomer()
				this.tradePasswordType = res.data.tradePasswordType
			},
			setPassword() {
				this.handleClose()
				uni.navigateTo({
					url: '/pages/my/set-up/transaction-password/password-settings/password-settings?step=1&match=1'
				})
			},
			sumitPay() {
				// console.log(5555)
				this.handleClose()
				this.setPasswordStatus = true
			},
			closePassword() {
				this.setPasswordStatus = false
				this.password = ''
			},
			changePhone(e) {
				console.log('值变化了')
				this.walletData = {}
				this.isShow = false
			},
			//转赠
			async handleSubmit() {
				if (this.isSubmit) {
					this.isSubmit = false
					const _this = this
					try {
						console.log(_this.detailsData.equityCardId)
						var res = await this.$api.getDonationConfig(_this.detailsData.equityCardId)
						this.configData = res.result
						this.$refs['pupop'].open()
						this.getCoin()
						this.isSubmit = true
					} catch {
						this.isSubmit = true
					}
				}

			},
			//获取用户 coin信息
			async getCoin() {
				var res = await this.$api.getCoin()
				if(this.configData.feeType==1){ //coco
					this.coinNum = res.result.coCo
				}else{ //通分
					this.coinNum = res.result.tpoint
				}
			},
			// 数字权益卡
			async getCustomerCardDetail(id) {
				var _this = this
				var res = await this.$api.getCustomerCardDetail(id)
				this.detailsData = res.result
			},
			//查询用户是否实名认证

			async getRealNameInfo() {
				var res = await this.$api.getRealNameInfo()
				var lenght = Object.keys(res.data).length
				console.log('lenght', lenght)
				if (lenght > 0) {
					this.isRealName = true
				} else {
					this.isRealName = false
					uni.showToast({
						title: '请实名认证',
						icon: 'none',
						duration: 2000
					});
					setTimeout(function() {
						uni.navigateTo({
							url: '/pages/my/certification/certification'
						})
					}, 1500);

				}
			},
			//查询
			async handleQuery() {
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				} else if (this.phone.length !== 11) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				const params = {
					phone: this.phone
				}
				var res = await this.$api.getH5CustomerInfoByPhone(params)
				this.walletData = res.result
				console.log('res', res)
			},
			//转赠支付
			async handlePay(type) {
				var _this = this
				if (this.payLoading) {
					if (type == 1) {
						this.payLoading = false
						try {
							let data = {
								customerEquityCardId: this.detailsData.id,
								fee: this.configData.fee,
								feeType: this.configData.feeType,
								toCustomerId: this.walletData.id,
								tradePassword: this.password
							}
							let jiami = rsaEncrypt(JSON.stringify(data)) //rsa加密
							let params = {
								encryptData: jiami
							}
							var res = await this.$api.getDonation(params)
							this.payLoading = true
							uni.showToast({
								title: '转赠成功',
								duration: 2000
							})
							setTimeout(function() {
								_this.handleClose()
								uni.reLaunch({
									url: '/pages/my/examplesOf/successPage/successPage?type=1'
								})
							}, 1500);
						} catch {
							_this.handleClose()
							this.password = ''
							this.payLoading = true
						}

					} else if (type == 2) {
						//微信支付
						this.wxPay()
					}
				} else {

				}
			},
			//微信支付
			async wxPay() {
				var _this = this
				if (wechat.isWechat()) {
					if (_this.payStatus) {
						_this.payStatus = false
						let data = {
							customerEquityCardId: _this.detailsData.id,
							fee: _this.configData.fee,
							feeType: _this.configData.feeType,
							toCustomerId: _this.walletData.id,
						}
						let jiami = rsaEncrypt(JSON.stringify(data)) //rsa加密
						let params = {
							encryptData: jiami
						}
						var res = await _this.$api.getDonation(params)
						uni.showLoading({
							title: '正在请求中'
						})
						try {
							uni.hideLoading()
							_this.orderId = res.result.orderId
							// _this.payStatus = true
							wechat.wexinPay(res.result, function(callback) {
								setTimeout(() => {
									uni.redirectTo({
										url: '/pages/my/examplesOf/successPage/successPage?orderId=' +
											_this.orderId + 'type=2'
									})
								}, 1000)

							}, async function(errorCallback) {
								var cancelRes = await _this.$api.getCancelOrder(_this.orderId)
								try {
									uni.showToast({
										title: '取消支付成功',
										icon: 'none'
									})
								} catch {
									uni.showToast({
										title: '取消支付成功',
										icon: 'none'
									})
								}

							})
						} catch {
							uni.hideLoading()
							_this.payStatus = true
						} finally {
							setTimeout(() => {
								_this.payStatus = true
							}, 2000)
						}
					} else {

						setTimeout(() => {
							this.payStatus = true
						}, 2000)
					}

				} else {
					uni.showToast({
						title: '请在微信客户端中使用',
						icon: 'none'
					})
				}
			},
			//关闭弹窗
			handleClose() {
				this.$refs['pupop'].close()
			},
			// 点击密码操作
			clickNum(key) {
				if (this.password.length < 6) {
					this.password += key.num
					if (this.password.length === 6) {
						// 密码验证操作	
						this.handlePay(1)
						// console.log(this.password,'37')
						// this.$.open('/trait/details');
					}
				}

			},
			deleteNum() {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1)
				}
			}
		}
	}
</script>

<style scoped>
	.examplesOf {
		color: #FCFCFD;
		padding: 0 32rpx 100rpx 32rpx;
	}

	.cadr_box {
		background: #fff;
		border-radius: 32rpx;
		box-shadow: 0px 4px 8px #EAEAEA;
		margin-top: 28rpx;
		padding: 30rpx;
	}

	.cadr_info {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.cadr_info .tou {
		width: 68rpx;
		height: 68rpx;
		border-radius: 50%;
	}

	.cadr_info .detail {
		margin-left: 22rpx;
	}

	.cadr_info .detail .name {
		font-size: 24rpx;
		color: #000;
	}

	.cadr_info .detail .code {
		display: inline-flex;
		height: 30rpx;
		justify-content: flex-start;
		border: 2rpx solid #F1C67F;
	}

	.cadr_info .detail .code view:nth-child(1) {
		background: linear-gradient(90deg, #F0C57D 3.45%, #F8E2B1 100%);
		height: 30rpx;
		line-height: 30rpx;
		width: 60rpx;
		text-align: center;
		font-size: 20rpx;
		color: #824806;
	}

	.cadr_info .detail .code view:nth-child(2) {
		height: 30rpx;
		line-height: 30rpx;
		padding: 0 10rpx;
		font-size: 20rpx;
		color: #CB7F00;
	}

	.card_content {
		width: 100%;
		height: 314rpx;
		border-radius: 16rpx;
		margin-top: 24rpx;
		position: relative;
	}

	.card_content .card_fen {
		width: 100%;
		height: 100%;
		border-radius: 16rpx;
	}

	.card_content .num {
		position: absolute;
		top: 20rpx;
		right: 0;
		height: 36rpx;
		background: #000000;
		opacity: 0.5;
		color: #FFFFFF;
		font-size: 20rpx;
		line-height: 36rpx;
		padding: 0 20rpx;
		border-top-left-radius: 40rpx;
		border-bottom-left-radius: 40rpx;
	}

	.card_content .card_name {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 68rpx;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.53) 58.82%);
		border-radius: 0px 0px 12px 12px;
		text-indent: 22rpx;
		line-height: 68rpx;
		font-size: 26rpx;
		color: #fff;
	}

	.input_box {
		margin-top: 30rpx;
		box-shadow: 0px 4px 8px #EAEAEA;
		border-radius: 16px;
		padding: 28rpx 40rpx;
		background-color: #FFF;
	}

	.input_box .bt {
		font-size: 30rpx;
		color: #222;
		margin-bottom: 30rpx;
	}

	.input_box .phoneBox {
		width: 100%;
		height: 92rpx;
		border: 2rpx solid #C2C2C2;
		border-radius: 80rpx;
		font-size: 32rpx;
		color: #222;
		padding-left: 32rpx;
		box-sizing: border-box;
	}

	.input_box .hui {
		color: #999;
	}

	.input_box .btn {
		width: 100%;
		height: 92rpx;
		border: 2rpx solid #1085F2;
		border-radius: 80rpx;
		margin-top: 40rpx;
		color: #0B87F2;
		font-size: 34rpx;
		text-align: center;
		line-height: 92rpx;
	}

	.resultsBox {}

	.noName {
		padding: 120rpx 0;
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		color: #898989;
	}

	.res {
		display: flex;
		flex-direction: column;
		font-size: 30rpx;
		color: #898989;
		padding: 40rpx 0;
	}

	.res .txt {
		word-break: break-all;
		word-wrap: break-word;
	}

	.res .txt1 {
		word-break: break-all;
		word-wrap: break-word;
		font-size: 30rpx;
		color: #222;
		margin-top: 40rpx;
	}

	.botBox {

		padding: 0 36rpx;
		box-sizing: border-box;
		left: 0;
		width: 100%;
		background: #fff;
	}

	.botBox .tips {
		font-size: 26rpx;
		color: #FF3A3A;
		margin-bottom: 40rpx;
	}

	.botBox .btn {
		width: 606rpx;
		height: 92rpx;
		line-height: 92rpx;
		text-align: center;
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		font-size: 34rpx;
		color: #fff;
		margin: 0 auto;
		border-radius: 100rpx;
		position: relative;
	}

	.botBox .tou {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #FFF;
		opacity: 0.4;
	}

	.botBox text {
		display: block;
		width: 100%;
		height: 100%;
	}

	.titlePop {
		width: 85%;
		margin: 0 auto;
		text-align: center;
		padding-top: 40rpx;
		font-size: 36rpx;
		color: #333;
		font-weight: 500;
	}

	.moneyBox {
		margin-top: 54rpx;
	}

	.moneyBox .money {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.moneyBox .money text:nth-child(1) {
		font-size: 36rpx;
		color: #222;
	}

	.moneyBox .money text:nth-child(2) {
		font-size: 56rpx;
		color: #FF3A3A;
	}

	.moneyBox .integral {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.moneyBox .integral .intLable {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.moneyBox .integral .intLable image {
		width: 44rpx;
		height: 44rpx;
	}

	.moneyBox .integral .intLable text {
		font-size: 36rpx;
		color: #222;
		margin-left: 10rpx;
	}

	.moneyBox .integral .intLable .num {
		font-size: 56rpx;
		color: #FF3A3A;
		font-weight: 700;
	}

	.moneyBox .integral .currMoney {
		font-size: 28rpx;
		color: #898989;
		margin-top: 16rpx;
	}

	.btnBox {
		display: flex;
		justify-content: center;
		margin-top: 88rpx;
		width: 100%;
	}

	.btnBox .btn {
		width: 370rpx;
		height: 92rpx;
		text-align: center;
		line-height: 92rpx;
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		border-radius: 80rpx;
		margin-bottom: 40rpx;
	}

	/*  */

	.coding_box {
		width: 100%;
		box-sizing: border-box;
		background: #fff;
		border-radius: 20rpx;
		padding-bottom: 60rpx;
	}

	.coding_box .title {
		width: 85%;
		margin: 0 auto;
		text-align: center;
		padding-top: 60rpx;
		font-size: 36rpx;
		color: #222222;
		font-weight: 500;
	}

	.coding_box_item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-top: 62rpx;
	}

	.coding_box_item_no {
		width: 100%;
		box-sizing: border-box;
		padding: 0 100rpx;
		font-size: 36rpx;
		font-weight: 600;
		text-align: center;
		color: #222222;
	}

	.but_no {
		padding: 15rpx 0;
		text-align: center;
		width: 300rpx;
		margin: 30rpx auto;
		background: #6F00FC;
		color: #fff;
		font-size: 32rpx;
		border-radius: 16rpx;

	}

	/* 支付 */
	.dialogo {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 999;
		background: rgba(0, 0, 0, 0.6);
	}

	.password_box {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 778rpx;
		background: #F5F5F6;
	}

	.password_title {
		background: #ffffff;
		font-size: 32rpx;
		color: #222222;
		width: 100%;
		text-align: center;
		padding: 40rpx 0;
	}

	.password_num {
		background: #ffffff;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

	}

	.password_zi:first-child {
		border-left: 2rpx solid #A5A8BB;
	}

	.password_zi {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 116rpx;
		height: 116rpx;
		border-top: 2rpx solid #A5A8BB;
		border-bottom: 2rpx solid #A5A8BB;
		border-right: 2rpx solid #A5A8BB;
	}

	.passwordOn {
		width: 28rpx;
		height: 28rpx;
		border-radius: 50%;
		background: #222222;
	}

	.digital_keyboard {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding-top: 60rpx;
		background: #ffffff;
	}

	.keyboard_kuagn {
		font-size: 56rpx;
		color: #030303;
		width: 248rpx;
		height: 108rpx;
		background: #fff;

		border-top: 2rpx solid #F5F5F6;
		border-right: 2rpx solid #F5F5F6;
		/* border-bottom: 2rpx solid #F5F5F6; */
	}

	.delete {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background: #F5F5F6 url('/static/index/activity/delete.png') no-repeat;
		background-size: 100% 100%;
	}

	.otherbg {
		width: 100%;
		height: 100%;
		background: #F5F5F6;
	}

	.keyboard_num {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.keyboard_num:active{
		background: rgba(0, 0, 0, 0.1);
	}

	/* end */
</style>
